import React, { Component } from 'react';

import {
  StyleSheet,
  PanResponder, Dimensions,
  View, ImageBackground,
} from 'react-native';

import { Text } from 'native-base';

import ImageIcons from './image-icons';
import Theme from '../native-base-theme/variables/commonColor';


const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;

class SlidingHead extends Component {
  _scrollEnabled = false;

  _previousTop = 0;

  _scale = 1;

  _opacity = 0;

  _minTop = -192 + 56;

  _userStyle = {};

  user = null;

  static defaultProps = {
    title: '标题',
    subtitle: '',
    bg: null,
    icon: 'zhinenggongchang',
    enabled: true,
  }

  static get HEIGHT() {
    return 192;
  }

  constructor() {
    super();
    this.state = {
      scale: 1,
      opacity: 0,
    };
  }

  componentWillMount() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => false,
      onStartShouldSetPanResponderCapture: () => false,
      onMoveShouldSetPanResponder: (e, gestureState) => {
        if (gestureState.dy === 0 || gestureState.dx === 0) {
          return false;
        }
        return (gestureState.dy / gestureState.dx) !== 0;
      },
      onPanResponderGrant: () => {},
      onPanResponderMove: (e, gestureState) => {
        this._userStyles.style.top = this._previousTop + gestureState.dy;
        this._scale = 1 + this._userStyles.style.top / 162.5;
        this._opacity = 0;

        if (this._userStyles.style.top < -88) {
          this._scale = 0.6;
          this._opacity = ((-this._userStyles.style.top - 88) / 192) ** 0.5;
        }
        if (this._userStyles.style.top > 0) {
          this._userStyles.style.top = 0;
          this._scale = 1;
        }
        if (this._userStyles.style.top < this._minTop) {
          this._userStyles.style.top = this._minTop;
          this._opacity = 1;
        }

        this.setState({
          scale: this._scale,
          opacity: this._opacity,
        });

        this._updatePosition();
      },
      onPanResponderTerminationRequest: () => true,
      onPanResponderRelease: () => this._endMove(),
      onPanResponderTerminate: () => this._endMove(),
      onShouldBlockNativeResponder: () => true,
    });

    this._userStyles = {
      style: {
        top: this._previousTop,
      },
    };
  }

  componentDidMount() {
    this._updatePosition();
  }

  _updatePosition = () => {
    if (this.user) {
      this.user.setNativeProps(this._userStyles);
    }
  }

  _endMove = () => {
    this._previousTop = this._userStyles.style.top;
  }

  render() {
    const panProps = this.props.enabled ? { ...this._panResponder.panHandlers } : {};
    const textOpacity = (this.state.opacity === 0.0) ? 1.0 : 0;
    return (
      <View ref={(user) => { this.user = user; }} style={styles.userContainer} {...panProps}>
        <ImageBackground
          resizeMode="cover"
          source={this.props.bg}
          style={[styles.bgHeading, { opacity: 1.0 - this.state.opacity }]}
        >
          <ImageIcons
            name={this.props.icon}
            style={[styles.headerImage, { transform: [{ scale: this.state.scale }] }]}
          />
          <Text style={[styles.heading, { opacity: textOpacity }]}>
            { this.props.title }
          </Text>
          <Text style={[styles.subheading, { opacity: textOpacity }]}>
            { this.props.subtitle }
          </Text>
        </ImageBackground>
        <View style={[styles.banner, { opacity: this.state.opacity }]}>
          <Text style={styles.heading}>
            { this.props.title }
          </Text>
        </View>

        { this.props.children }
      </View>
    );
  }
}

export default SlidingHead;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Theme.myPrimary,
  },
  userContainer: {
    width: deviceWidth,
    height: deviceHeight - 50,
    backgroundColor: 'transparent',
    position: 'absolute',
    top: 0,
    left: 0,
  },
  banner: {
    width: deviceWidth,
    height: 56,
    position: 'absolute',
    top: 136,
    left: 0,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Theme.myPrimary,
  },
  bgHeading: {
    width: deviceWidth,
    height: 192,
    position: 'absolute',
    top: 0,
    left: 0,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Theme.myPrimary,
  },
  heading: {
    color: 'white',
    marginTop: 8,
    fontSize: 22,
  },
  subheading: {
    color: 'white',
    marginTop: 6,
    fontSize: 18,
  },
  headerImage: {
    height: 72,
    width: 72,
  },
});
